<template>
  <view class="viewport">
    <scroll-view
      class="scroll-view"
      :refresher-triggered="refreshing"
      scroll-y="true"
      lower-threshold="20"
      @scrolltolower="onScrollToLower"
      @refresherrefresh="onRefresh"
    >
      <view class="warp">
        <view class="title">
          <fui-section
            title="审批流程"
            fontWeight="500"
            descrSize="25"
            color="#666"
            lineWidth="4px"
            isLine
          ></fui-section>
        </view>
        <view class="ul">
          <template v-for="(item, index) in approvalList" :key="item.id">
            <view :class="item.status === 1 ? 'li' : 'li_item'">
              <view class="img_box">
                <view class="img_left">{{
                  item.approverName?.substring(0, 1) || "未"
                }}</view>
                <image
                  v-if="item.status === 1"
                  class="img"
                  src="/static/images/index/goxuan.svg"
                  mode=""
                ></image>
              </view>
              <view class="title">{{ item.approverName || "未分配" }}</view>
              <view class="apply">{{
                item.status === 1 ? item.approvalResult : "待审批"
              }}</view>
              <view v-if="item.status === 1" class="apply">{{
                item.approvalTime
              }}</view>
            </view>
            <view v-if="index !== approvalList.length - 1" class="xian"></view>
          </template>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getMalfunctionRepairApproval } from "@/pages/api/subpkg_index/malfunctionRepair.js";

const approvalList = ref([]);
const refreshing = ref(false);

// 获取页面参数
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const repairId = currentPage.$page?.options?.id || "";

// 获取审核流程数据
const getApprovalList = async () => {
  try {
    const res = await getMalfunctionRepairApproval({ repairId });
    if (res.code === 200 && res.success) {
      approvalList.value = res.data;
    }
  } catch (error) {
    console.error("获取审核流程数据失败:", error);
  }
};

// 下拉刷新
const onRefresh = async () => {
  refreshing.value = true;
  await getApprovalList();
  refreshing.value = false;
};

// 触底加载更多
const onScrollToLower = () => {
  // 暂无更多数据加载
};

onMounted(() => {
  getApprovalList();
});
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: skyblue;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  height: 100%;
}
.warp {
  padding-bottom: 100rpx;
  // background-color: pink;
  // display: flex;
  .title {
    border-bottom: 1px solid #ccc;
    height: 70rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
  }
  .ul {
    margin-top: 20rpx;
    padding-top: 40rpx;
    // border-top: 1px solid #ccc;
    .xian {
      height: 100rpx;
      width: 2rpx;
      background-color: #ccc;
      margin-left: 90rpx;
    }
    .li_item {
      display: flex;
      padding: 0 30rpx 0 40rpx;
      align-items: center;
      .title {
        margin-left: 45rpx;
      }
      .apply {
        margin-left: 55rpx;
        color: #0052d9;
      }
    }
    .li {
      display: flex;
      padding: 0 30rpx 0 40rpx;
      align-items: center;
      justify-content: space-between;
      .apply {
        color: #ccc;
      }
    }
    .img_box {
      position: relative;
      .img_left {
        background-color: #0052d9;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      .img {
        position: absolute;
        right: 0;
        top: 70rpx;
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
</style>
